<template>
	<a-card :bordered="false">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="5">
					<a-form-item label="资产分类" name="assetCategory">
						<a-select
							v-model:value="searchFormState.assetCategory"
							placeholder="请选择资产分类"
							:options="assetsCategoryOptions"
							allowClear
						/>
					</a-form-item>
				</a-col>
				<a-col :span="5">
					<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
				</a-col>
			</a-row>
		</a-form>
		<s-table ref="tableRef" :columns="columns" :data="loadData" bordered rowKey="id" :scroll="{ x: 'max-content' }">
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="addFormRef.onOpen()" v-if="hasPerm('bizNoticeAdd')">
						<template #icon>
							<plus-outlined />
						</template>
						新增
					</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'image'">
					<div v-if="record.image && record.image !== ''" class="image-cell">
						<a-image
							:src="jdOssBaseUrl + record.image"
							:width="50"
							:height="50"
							:preview="{
								visible: previewVisible.image === record.id,
								onVisibleChange: (visible) => handlePreviewVisibleChange(visible, 'image', record.id)
							}"
						/>
					</div>
				</template>
				<template v-if="column.dataIndex === 'signatureImg'">
					<div v-if="record.signatureImg && record.signatureImg !== ''" class="image-cell">
						<a-image
							:src="record.signatureImg"
							:width="100"
							:height="50"
							:preview="{
								visible: previewVisible.signatureImg === record.id,
								onVisibleChange: (visible) => handlePreviewVisibleChange(visible, 'signatureImg', record.id)
							}"
						/>
					</div>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a-popconfirm
							v-if="record.issueStatus === 1"
							title="确认要已领用此资产了吗？"
							@confirm="operation(record.id, 2)"
						>
							<a-button type="link" size="small">确认</a-button>
						</a-popconfirm>
						<a-button
							v-if="record.issueStatus === 2"
							type="link"
							@click="operationModelRef.show(record.id, 3, '资产归还')"
							>归还
						</a-button>
						<a-popconfirm
							v-if="record.issueStatus === 3"
							title="确认要已归还此资产了吗？"
							@confirm="operation(record.id, 4)"
						>
							<a-button type="link" size="small">确认</a-button>
						</a-popconfirm>
						<a-button
							v-if="record.issueStatus === 5"
							type="link"
							size="small"
							@click="operationModelRef.show(record.id, 6, '维修完成')"
							>完成
						</a-button>
						<a-button
							v-if="record.issueStatus === 5"
							type="link"
							size="small"
							@click="operationModelRef.show(record.id, 7, '维修报废')"
							>报废
						</a-button>
						<a-button
							v-if="record.issueStatus === 8"
							type="link"
							size="small"
							@click="operationModelRef.show(record.id, 9, '资产接收')"
							>接收
						</a-button>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<AddForm ref="addFormRef" @successful="handleFormSuccess" />
	<OperationModel ref="operationModelRef" @confirm="tableRef.refresh(true)" />
</template>

<script setup name="AssetsIssue">
	import AddForm from '@/views/hrms/assets/issue/addForm.vue'
	import tool from '@/utils/tool'
	import assetsIssueApi from '@/api/hrms/assets/issue/assetsIssueApi'
	import OperationModel from '@/views/hrms/assets/issue/operationModel.vue'

	const searchFormState = ref({
		current: 1,
		size: 10
	})
	const tableRef = ref()
	const searchFormRef = ref()
	const addFormRef = ref()
	const operationModelRef = ref()
	const assetsCategoryOptions = tool.dictList('ASSETS_CATEGORY')
	const jdOssBaseUrl = 'https://s3.cn-north-1.jdcloud-oss.com/'

	// 图片预览控制
	const previewVisible = ref({
		image: null,
		signatureImg: null
	})

	const columns = [
		{ title: '资产图片', dataIndex: 'image', align: 'center' },
		{ title: '领用状态', dataIndex: 'issueStatusName' },
		{ title: '资产分类', dataIndex: 'assetCategoryName' },
		{ title: '资产名称', dataIndex: 'assetName' },
		{ title: '资产编码', dataIndex: 'assetCode' },
		{ title: '规格型号', dataIndex: 'specification' },
		{ title: '序列号', dataIndex: 'serialNumber' },
		{ title: '备注', dataIndex: 'remark' },
		{ title: '签名确认', dataIndex: 'signatureImg' },
		{ title: '领用人', dataIndex: 'issueName' },
		{ title: '领用部门', dataIndex: 'deptName' },
		{ title: '创建人', dataIndex: 'createUserName' },
		{ title: '创建时间', dataIndex: 'createTime' },
		{ title: '操作', dataIndex: 'action', align: 'center', width: 200, fixed: 'right' }
	]

	// 加载数据
	const loadData = async (params) => {
		const searchParams = {
			...searchFormState.value,
			...params
		}
		return assetsIssueApi.pageList(searchParams).then((res) => {
			return res
		})
	}

	// 处理图片预览可见性变化
	const handlePreviewVisibleChange = (visible, type, recordId) => {
		if (visible) {
			previewVisible.value[type] = recordId
		} else {
			previewVisible.value[type] = null
		}
	}

	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		if (tableRef.value) {
			tableRef.value.refresh(true)
		}
	}

	// 表单操作成功后的回调
	const handleFormSuccess = () => {
		if (tableRef.value) {
			tableRef.value.refresh(true)
		}
	}

	const operation = (id, status) => {
		assetsIssueApi.operation(id, status, null).then(() => {
			tableRef.value.refresh(true)
		})
	}
</script>

<style scoped>
	.image-cell {
		display: inline-block;
	}
</style>
